<template>
  <div class="main-box">
    <div class="left-box"></div>
    <div class="mid-box"></div>
    <div class="right-box"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MainBox",
  props: {
    msg: String,
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.main-box {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  .left-box {
    width: 600px;
    background: red;
    height: 400px;
  }
  .mid-box {
    width: 600px;
    background: red;
    height: 400px;
  }
  .right-box {
    width: 600px;
    background: red;
    height: 400px;
  }
}
</style>
